<template>
    <div class="main">
        <Header />
        <div class="content">
            <mt-navbar class="page-part" v-model="selected">
                <mt-tab-item id="1">全部</mt-tab-item>
                <mt-tab-item id="2">家具生活</mt-tab-item>
                <mt-tab-item id="3">设计</mt-tab-item>
                <mt-tab-item id="4">摄影设计</mt-tab-item>
                <mt-tab-item id="5">明星美女</mt-tab-item>
                <mt-tab-item id="6">空间设计</mt-tab-item>
            </mt-navbar>

            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="item" @click="$router.push(`/imgShareItem/${index}`)" v-for="(item,index) in dataList" :key="index">
                        <img  :src="item.img" alt="">
                        <div class="item-text">
                            <p>{{item.title}}</p>
                            <div>{{item.text}}</div>
                        </div>
                    </div>
                   
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <mt-cell v-for="n in 6" :title="'选项 ' + n" />
                    
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                    <div class="item" @click="$router.push(`/imgShareItem/${index}`)" v-for="(item,index) in dataList" :key="index">
                        <img  :src="item.img" alt="">
                        <div class="item-text">
                            <p>{{item.title}}</p>
                            <div>{{item.text}}</div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="4">
                    <div class="item" @click="$router.push(`/imgShareItem/${index}`)" v-for="(item,index) in dataList" :key="index">
                        <img  :src="item.img" alt="">
                        <div class="item-text">
                            <p>{{item.title}}</p>
                            <div>{{item.text}}</div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="5">
                    <mt-cell v-for="n in 6" :title="'选项 ' + n" />
                </mt-tab-container-item>
                <mt-tab-container-item id="6">
                    <mt-cell v-for="n in 6" :title="'选项 ' + n" />
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
import Header from '../Header/Header.vue'
export default {
    components: { Header },
    data(){
        return {
            selected:'1',
            dataList:[
                {
                    img:'../../../static/img/apple.jpg',
                    title:'现代简约 明亮的外表卧室背景墙',
                    text:"不要简约不要苏雅洋气啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧"
                },
                {
                    img:'../../../static/img/apple.jpg',
                    title:'现代简约 明亮的外表卧室背景墙',
                    text:"不要简约不要苏雅洋气啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧"
                },
                {
                    img:'../../../static/img/apple.jpg',
                    title:'现代简约 明亮的外表卧室背景墙',
                    text:"不要简约不要苏雅洋气啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧"
                },
                {
                    img:'../../../static/img/apple.jpg',
                    title:'现代简约 明亮的外表卧室背景墙',
                    text:"不要简约不要苏雅洋气啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧"
                },
            ]
        }
    }
}
</script>

<style scoped>
.content{
    margin-top: 6vh;
    margin-bottom: 7vh;
}
.content >>> .mint-tab-item {
    border:none
}
.item{
    position: relative;
    margin: 2% 2% 4%;
    box-shadow: 0 0 2px 1px;
    width: 96%;
    /* height: 40vh; */
}
.item>img{
    width: 100%;
    height: 100%;
}
.item-text{
    position: absolute;
    bottom: 0;
    background: #999;
    color: white;
}
.item-text >p{
    color: white;
    font-size: 14px;
}
.item-text > div{
    font-size: 12px;
    text-align: left;
}
</style>